<template>
  <main v-if="!isNotFound">
    <Row>
      <left-module 
        :blogList="blogList"
        :totalBlog="totalBlog"
        :currentPage="currentPage"
        :pageSize="pageSize"
        @changePage="changePage"
      ></left-module>
      <right-module></right-module>
    </Row>
  </main>
  <not-found v-else></not-found>
</template>

<script>
export default {
  name: 'Archive',
  data() {
    return {
      totalBlog: 0,
      currentPage: +this.$route.query.page || 1,
      pageSize: 12,
      blogList: [],
      flag: true,
      isNotFound: false
    }
  },
  created() {
    this.getArchive()
  },
  computed: {
    archivesList() {
      return this.$store.getters['blog/archives']
    }
  },
  methods: {
    getArchive() {
      let id = this.$route.params['id']
      this.archivesList.forEach(item => {
        if (id === item.year) {
          this.blogList = item.blogList
          this.totalBlog = item.blogList.length
        }
      })
      if (this.totalBlog === 0) {
        this.isNotFound = true
      }
      document.title = `${id} - ${this.documentTitle}`
      // 伪分页
      this.blogList = this.blogList.slice(
        (this.currentPage-1) * this.pageSize, 
        this.pageSize * this.currentPage
      )
    },
    changePage(currentPage) {
      this.currentPage = currentPage
      this.getArchive()
      this.flag = false
      let query = currentPage === 1 ? {} : { page: currentPage }
      this.$router.push({ name: 'archive', query: query })
    }
  },
  watch: {
    $route(to, from) {
      if (this.flag && to.name === 'archive') {
        this.currentPage = +to.query.page || 1
        this.getArchive()
      }
      this.flag = true
    }
  },
  components: {
    "left-module": () => import("components/homePage/LeftModule"),
    "right-module": () => import("components/homePage/RightModule"),
  }
}
</script>

<style lang="scss" scoped>
</style>